<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唯品会登录</title>
    <link rel="stylesheet" href="static/css/vip/denglu.css">
    <link rel="stylesheet" href="static/js/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="./static/css/font-awesome.css">
    <link rel="stylesheet" href="./static/fontawesome/css/all.css">
    <style>
        li {
            font-size: 12px;
            color: rgb(157, 157, 157);
            line-height: 21px;
            text-indent: 20px;
            list-style-type: disc;

        }

        #zcdl {
            width: 245px;
            background-color: #e61c8c;
            margin: 30px 22px;
        }

        .yanzhengs {
            width: 47px;
            height: 25px;
        }

        .wenziyanzhnegs {
            display: flex;
            margin: auto 40px;
        }

        .yanzhengjianju {
            margin: auto 20px;
        }
    
    </style>
</head>


<!-- <script src="layer/layer.js"></script> -->

<body>
    <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
    <script src="./static/js/jquery.min.js"></script>
    <div>
        <div id="toubu">
            <div class="logo">
                <img src="static/imges/1 (2).png" alt="" width="160" height="100">

            </div>
            <div class="logo1">
                <div class="sgxtb">
                    <div class="toubutubiao">
                        <div>
                            <img src="static/imges/正品.png" alt="" class="tubiaoss">
                        </div>
                        <div class="toubuziti">
                            <b>100%正品</b>
                        </div>
                    </div>
                    <div class="toubutubiao">
                        <div>
                            <img src="static/imges/七天.png" alt="" class="tubiaoss">
                        </div>
                        <div class="toubuziti">
                            <b>七天放心退</b>
                        </div>
                    </div>
                    <div class="toubutubiao">
                        <div>
                            <img src="static/imges/限时抢购.png" alt="" class="tubiaoss">
                        </div>
                        <div class="toubuziti">
                            <b>限时抢购</b>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="zhongjian">
            <div class="tu">
                <div class="tu1">
                    <img src="static/imges/1607915393371.jpg"
                        style="position: absolute;clip: rect(20px,1100px,500px,400px);width: 1720px;height: 650px">
                </div>
                <div id="deng">
                    <div id="denglu">
                        <div class="tou" onclick="over()" id="dl">用户登录</div>
                        <div class="xian"></div>
                        <div class="tou1" onclick="over1()" id="zc">用户注册</div>
                    </div>
                    <div id="denglu1">
                        <div class="shuru1" id="shuru1">
                            <div class="shurujuzhong">
                                <div class="tubiao"><img src="static/imges/账号.png"></div>
                                <div><input type="text" style=border:none placeholder="请输入账号" class="sr" id="name">
                                </div>
                            </div>
                        </div>
                        <!-- <span id="tishi"></span> -->
                        <div class="shuru2" id="shuru2">
                            <div class="shurujuzhong">
                                <div class="tubiao"><img src="static/imges/密码.png"> </div>
                                <div> <input type="password" style=border:none name="password" placeholder="请输入密码"
                                        class="sr" id="password">
                                </div>

                            </div>

                        </div>
                        <!-- <span id="tishi2"></span> -->
                        <!-- <div class="shuru4">
                            <div class="duanxin"><a href="" class="duanxin1">短信验证登录</a></div>
                            <div class="wangji"><a href="" class="wangji1">忘记密码</a></div>

                        </div> -->
                        <div class="shuru5">
                            <!-- 点击判断 如果点击单选框走进 enable方法 执行已勾选 反之执行disable方法 -->
                            <div>
                                <input type="checkBox" class="danxuan" id="danxuan">
                               
                            </div>
                            <div class="xieyi">
                                我已阅读并接受以下条款:
                                <a href="" class="tiaoyue">《唯品会服务条款》</a>
                                <a href="" class="tiaoyue">《唯品或隐私政策》</a>
                                <a href="" class="tiaoyue">《唯品支付用户服务协议》</a>
                            </div>
                        </div>
                        <div class="shuru3">
                            <button class="layui-btn layui-btn-lg layui-btn-normal" id="normal">登录</button>
                        </div>
                        <div class="shuru6">
                            <div class="weixinxian"></div>
                            <div><img src="static/imges/微信.png" class="weixintubiao"></div>
                            <div class="weixinxian"></div>
                        </div>
                        <div class="shuru7">
                            <div class="shuru7s">
                                <div class="hao">
                                    <div class="huisezitis" onclick="xlwb()">新浪微博</div>
                                </div>
                                <div class="hao3"></div>
                                <div class="hao1"><a href="" class="qq">QQ</a></div>
                                <div class="hao3"></div>
                                <div class="hao2"><a href="" class="qq">支付宝</a></div>
                            </div>
                            <div class="shuru7ss">
                                <div class="haohao" onclick="over2()" id="gds">更多 <img src="static/imges/下箭头.png"></div>
                                <div class="haohao" onclick="over3()" id="sq">收起 <img src="static/imges/上箭头.png"></div>
                                <div class="haohao1">
                                    <div class="qq" onclick="smdll()">扫码登录</div>
                                </div>
                            </div>
                        </div>
                        <div class="shuru8" id="gd">
                            <div class="shuru8s">
                                <div class="hao4">
                                    <div class="huisezitis" onclick="ypl()">网易</div>
                                </div>
                                <div class="hao5"></div>
                                <div class="hao4">
                                    <div class="huisezitis" onclick="ypl()">人人网</div>
                                </div>
                                <div class="hao5"></div>
                                <div class="hao4">
                                    <div class="huisezitis" onclick="ypl()">开心网</div>
                                </div>
                                <div class="hao5"></div>
                                <div class="hao4">
                                    <div class="qq">翼支付</div>
                                </div>
                            </div>
                            <div class="shuru8ss">
                                <div class="buzhunque"><img src="static/imges/叹号.png"> </div>
                                <div><a href="./jianhang.html" class="baochijuli">关于建行、中国移动登录失效通知,请查看</a></div>
                            </div>
                        </div>
                    </div>
                    <div id="denglu2">
                        <div class="denglu1">
                            <div class="shuru1" id="zcsr1">
                                <div class="shurujuzhong">
                                    <div class="tubiao"><img src="./static/imges/账号.png" alt=""></div>
                                    <div><input type="text" id="zcuser" style=border:none placeholder="请输入用户名"
                                            class="sr"></div>
                                </div>
                            </div>
                            <div id="wenziyouxi">
                                <div
                                    style="text-align:center;width:400px;margin-left:-17px; margin-top: -20px; margin-bottom: 10px;">
                                    <div class="wenziyanzhnegs">
                                        <div id="div1"
                                            style="background-color: #ffafdb;width: 160px;line-height: 30px;text-align:center;font-size:14px;font-weight:bolder;">
                                        </div>
                                        <div class="yanzhengjianju"> <input type="button" style="font-size:12px"
                                                value="验 证" onclick="dasda()" class="yanzhengs" /></div>
                                    </div>
                                    <div style="margin-left: -82px;">
                                        <span id="div2" style="font-size:14px"></span>
                                        <span style="font-size:14px;color:red;background-color:bisque;cursor:pointer"
                                            onclick="fromCharCodetext()">看不清，点击一下这里</span>
                                    </div>
                                </div>
                            </div>
                            <div class="sjhyz" id="sjhdzy">
                                <div class="shuru2" id="zcsr2">
                                    <div class="shurujuzhong">
                                        <div class="tubiao"><img src="static/imges/账号.png"> </div>
                                        <div> <input type="password" style=border:none name="password"
                                                placeholder="请输入账号" class="sr" id="zczh"></div>
    
                                    </div>
                                </div>
                                <div class="shuru2s" id="zcsr3">
                                    <div class="shurujuzhong">
                                        <div class="tubiao"><img src="static/imges/密码.png"> </div>
                                        <div> <input type="password" style=border:none name="password"
                                                placeholder="请输入密码" class="sr" id="zcmm"></div>
                                    </div>
                                </div>
                            
                                <div class="xingbie">
                                    <div class="shurujuzhong">
                                        <div class="xbtubiao"><img src="static/imges/性别.png"> </div>
                                        <div class="xingbie">  <input type="radio" style=border:none name="sex" title="男" value="男" class="nan" id="nan">男
                                        <input type="radio" style=border:none name="sex" value="女" class="nv" id="nv">女</div>
                                    </div>
                                </div>
                                <div class="shuru5">
                                    <!-- 点击判断 如果点击单选框走进 enable方法 执行已勾选 反之执行disable方法 -->
                                    <div>

                                        <input type="checkBox" id="zhudanxuan" class="danxuan">
                                    </div>
                                    <div class="xieyi">
                                        我已阅读并接受以下条款:
                                        <a href="" class="tiaoyue">《唯品会服务条款》</a>
                                        <a href="" class="tiaoyue">《唯品或隐私政策》</a>
                                        <a href="" class="tiaoyue">《唯品支付用户服务协议》</a>
                                    </div>
                                </div>
                                <div class="shuru3">
                                    <button class="layui-btn layui-btn-lg layui-btn-normal" id="zcdl">注册</button>
                                </div>
                                <div style="margin-top: 45px;" class="tzdenglu">
                                    已注册<a href="" onclick="over()" class="qqg">可直接登录</a>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <div id="weibu">
        <div class="yi">
            <img src="static/imges/footer_common_20200705-hash-2a8e96cf.png" alt="">
        </div>
        <div class="er">
            <div class="er1">
                <div class="ers">
                    <p class="sp">服务保障</p>
                    <!-- <span class="sp"></span> -->
                    <li><a href="" class="weibuxiaoguo">正品保证</a></li>
                    <li><a href="" class="weibuxiaoguo">7天无理由放心退</a></li>
                    <li><a href="" class="weibuxiaoguo">7×15小时客户服务</a></li>
                    <li><a href="" class="weibuxiaoguo">7天无理由随心换</a></li>


                </div>
                <div class="ers">
                    <p class="sp">购物指南</p>
                    <li><a href="" class="weibuxiaoguo">导购演示</a></li>
                    <li><a href="" class="weibuxiaoguo">订单操作</a></li>
                    <li><a href="" class="weibuxiaoguo">会员注册</a></li>
                    <li><a href="" class="weibuxiaoguo">账户管理</a></li>
                    <li><a href="" class="weibuxiaoguo">收货样品</a></li>
                    <li><a href="" class="weibuxiaoguo">会员等级</a></li>
                </div>
                <div class="ers">
                    <p class="sp">支付方式</p>
                    <li><a href="" class="weibuxiaoguo">23家主流网银支付</a></li>
                    <li><a href="" class="weibuxiaoguo">支付宝、银联等支付</a></li>
                    <li><a href="" class="weibuxiaoguo">信用卡支付</a></li>
                    <li><a href="" class="weibuxiaoguo">零钱支付</a></li>

                </div>
                <div class="ers">
                    <p class="sp">配送方式</p>
                    <li><a href="" class="weibuxiaoguo">配送范围及运费</a></li>
                    <li><a href="" class="weibuxiaoguo">验货与签收</a></li>
                </div>
                <div class="ers">
                    <p class="sp">售后服务</p>
                    <li><a href="" class="weibuxiaoguo">退货政策</a></li>
                    <li><a href="" class="weibuxiaoguo">退货流程</a></li>
                    <li><a href="" class="weibuxiaoguo">退货方式和时效</a></li>
                    <li><a href="" class="weibuxiaoguo">换货服务</a></li>
                </div>
                <div class="ers1">
                    <div class="erweima">
                        <div class="wei">唯品会APP二维码</div>
                        <div><img src="static/imges/1466134037230.jpg" alt="" width="107.5" height="107.5"></div>
                        <div class="wei">下载唯品会移动APP</div>
                    </div>

                </div>
            </div>

        </div>
        <div class="wu">
            <div class="wu1">

                <a href="" class="ziti">关于我们</a>
                <div class="xian1"></div>
                <a class="ziti">About us</a>

                <div class="xian1"></div>
                <a href="" class="ziti">InvestorRelations</a>

                <div class="xian1"></div>
                <a href="" class="ziti">媒体报道</a>

                <div class="xian1"></div>
                <a href="" class="ziti">品牌招商</a>

                <div class="xian1"></div>
                <a href="" class="ziti">平台规则</a>

                <div class="xian1"></div>
                <a href="" class="ziti">隐私条款</a>

                <div class="xian1"></div>
                <a href="" class="ziti">唯品诚聘</a>

                <div class="xian1"></div>
                <a href="" class="ziti">唯品卡</a>

                <div class="xian1"></div>
                <a href="" class="ziti">联系我们</a>

                <div class="xian1"></div>
                <a href="" class="ziti">廉正举报</a>

                <div class="xian1"></div>
            </div>

        </div>
        <div class="san">
            <div class="san1">Copyright © 2008-现在 vip.com，All Rights Reserved 使用本网站即表示接受 <a href="">唯品会用户协议</a>。版权所有 <a
                    href="">广州唯品会电子商务有限公司</a></div>
            <div class="san1"><img src="static/imges/police_icon.png" alt=""> <a href="">粤公网安备 44010302111111号</a>
                <a>粤ICP备08114786号</a> <a href="">增值业务经营许可证：粤B2-20170777</a> <a href="">网络文化经营许可证：粤网文〔2021〕2056-282号</a>
            </div>
            <div class="san1"><a href="">经营主体证照</a> <a href="">风险监测信息</a> <a href="">互联网药品信息服务资格证书：（粤）-经营性-2018-0271</a>
                <a href="">网络食品交易第三方平台备案凭证：粤B2-20170777</a> <a>医疗器械网络交易服务第三方平台备</a>
            </div>
            <div class="san1"><a href="">案凭证：（粤）网械平台备字[2019]第00001号</a> 出版物网络交易平台服务经营备案证：粤新出网备（2021）1号 <a
                    href="">未成年人关怀专区</a></div>
            <div class="san1">违法和不良信息举报电话：4006789888 算法推荐违规举报电话：4006789888</div>
        </div>
        <div class="si">
            <div id="ditu1">
                <div class="ditu"><img src="static/imges/33333.png" alt="" width="90" height="30"></div>
                <div class="ditu"><img src="static/imges/footer_no_good-hash-1fe63524.png" alt="" width="75"
                        height="36"></div>
                <div class="ditu"><img src="static/imges/icon1.png" alt="" width="85" height="30"></div>
                <div class="ditu"><img src="static/imges/1212.png" alt=""></div>
            </div>



        </div>
    </div>
    </div>
    <script>




        //控制登录和注册的切换
        document.getElementById("denglu2").style.display = "none";
        //收起和更多的隐藏与显示
        document.getElementById("sq").style.display = "none";
        document.getElementById("gd").style.display = "none";
        //文字验证的隐藏与显示
        document.getElementById("wenziyouxi").style.display = "none";
        function over() {
            //登录注册颜色交替
            document.getElementById("zc").style.color = '#2d2d2d';
            document.getElementById("dl").style.color = '#e61c8c';
            //登录注册页面的显示与隐藏
            document.getElementById("denglu1").style.display = "";
            document.getElementById("denglu2").style.display = "none";
        }
        function over2() {
            document.getElementById("sq").style.display = "";
            document.getElementById("gd").style.display = "";
            document.getElementById("gds").style.display = "none";
        }
        function over3() {
            document.getElementById("sq").style.display = "none";
            document.getElementById("gd").style.display = "none";
            document.getElementById("gds").style.display = "";
        }
        //文字验证的显示
        function wenziyz() {
            document.getElementById("wenziyouxi").style.display = "";
        }
        //扫码登录弹窗
        function smdll() {
            layer.msg('二维码维护中~', { icon: 5 });
        }
        //新浪微博弹窗
        function xlwb() {
            layer.msg('新浪微博跑路了', { icon: 7 });
        }
        //人人网跑路
        function ypl() {
            layer.msg('已跑路', { icon: 7 });
        }
        //手机号输入判断


        function over1() {
            //登录注册颜色交替
            document.getElementById("zc").style.color = '#e61c8c';
            document.getElementById("dl").style.color = '#2d2d2d';
            //登录注册页面的显示与隐藏
            document.getElementById("denglu2").style.display = "";
            document.getElementById("denglu1").style.display = "none";
        }

        //登录合约单选框判断



        // $("#normal").click(function () {
        //     var len1 = $("#danxuan").prop("checked");
        //     let name = document.getElementById("name").value;
        //     let pwd = document.getElementById("password").value;
        //     if (len1 == true) {
        //         if  (isNaN(name)) {
        //         alert("用户名请输入数字");
               
        //     }else if(name.length != 6){
        //         alert("请重新输入！用户名是6位");
        //     }else if(pwd.length != 6){
        //         alert("请重新输入！密码是6位");
        //     }else{
        //         alert("登录成功");
        //     }
        //     } else {
        //         alert("请先勾选条款");
        //     }
        // });

        // $("#zcdl").click(function () {
        //     var len2 = $("#zhudanxuan").prop("checked");
        //     let num = document.getElementById("number");
        //     if (len2 == true) {
        //         alert("全部选中");
        //     } else {
        //         alert("未全部选中");
        //     }
        // });


        //文字验证
        // var ss;
        // var sss;
        // fromCharCodetext();
        // function fromCharCodetext() {
        //     ss = "";
        //     sss = "";
        //     var s1 = 20000;
        //     var ys = 143;
        //     var length = document.getElementById("div1");
        //     if (length.children.length > 0) {
        //         for (var y = 0; y < length.children.length; y++) {
        //             length.removeChild(length.childNodes[1]);//删除子元素
        //             y--;
        //         }
        //     }
        //     var array = new Array('①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩');
        //     for (var i = 0; i < parseInt(Math.random() * 4) + 2; i++) {//随机数 parseInt(Math.random() * 5) 

        //         var z = String.fromCharCode(s1 + parseInt(Math.random() * 1000));//fromCharCode 从字符编码创建一个字符串。
        //         if (i < parseInt(Math.random() * 3) + 2) {
        //             ss += z;
        //         }
        //         var s = document.createElement("i");//创建i标签
        //         // var vs = document.createElement("i");//创建i标签
        //         s.style = "color:#" + parseInt(Math.random() * 500) + ys + ""//随机颜色
        //         var i2 = document.createTextNode("" + z + "");//随机汉字
        //         s.appendChild(i2);
        //         var q = 0;
        //         document.getElementById("div1").appendChild(s);
        //         s.onclick = function () {
        //             if (/①|②|③|④|⑤|⑥|⑦|⑧|⑨|⑩/.test(this.textContent)) {
        //                 q--;
        //                 this.textContent = this.textContent.replace(array[q], "");
        //                 sss = sss.replace(this.textContent, "");
        //             } else {
        //                 sss += this.textContent;
        //                 var i2 = document.createElement("span");//随机汉字
        //                 i2.style = "color:blue;font-size:14px";
        //                 i2.appendChild(document.createTextNode("" + array[q] + ""))
        //                 this.appendChild(i2);
        //                 q++;
        //             }
        //         }
        //     }
        //     if (parseInt(Math.random() * 2) == 1) {
        //         var str = ss.split("").reverse().join("");//字符串反转
        //         document.getElementById("div2").innerHTML = str;
        //     } else {
        //         document.getElementById("div2").innerHTML = ss;
        //     }
        // }

        function dasda() {
            if (document.getElementById("div2").innerHTML == sss) {
                alert("验证成功");
                fromCharCodetext()
            } else {
                alert("验证失败")
                fromCharCodetext()

            }
        }
        // 登录表单验证
        $("#normal").click(function(){
            let name = document.getElementById("name").value;
            let name1 = document.getElementById("name");
            let shuru1 = document.getElementById("shuru1");

            let pwd = document.getElementById("password").value;
            let pwd1 = document.getElementById("password");
            let shuru2 = document.getElementById("shuru2");

            let len1 = $("#danxuan").prop("checked");
            if (len1 == false) {
                alert("请勾选条约")
            }

            if( name.length != 6  ){
                document.getElementById("name").value = "";
                name1.setAttribute("placeholder", "账号请输入数字，账号是六位")
                shuru1.style["border"]="2px solid red";

            }else{
                shuru1.style["border"]="";
                
            }
            if (pwd.length < 6) {
                document.getElementById("password").value = "";
                pwd1.setAttribute("placeholder", "请重新输入，密码不能小于六位")
                shuru2.style["border"]="2px solid red";
            }else{
                shuru2.style["border"]="";
            }
        })
       
        //注册验证
        $("#zcdl").click(function(){
            let zh = document.getElementById("zczh");
            let zczh = document.getElementById("zczh").value
            let zcsr2 = document.getElementById("zcsr2");
            let mm = document.getElementById("zcmm");
            let zcmm = document.getElementById("zcmm").value
            let zcsr3 = document.getElementById("zcsr3");
            if (zczh.length != 6 ) {
                document.getElementById("zczh").value = "";
                zh.setAttribute("placeholder", "账号是六位");
                zcsr2.style["border"]="2px solid red";
                
            }else{
                zcsr2.style["border"]="";
            }

            if (zcmm.length < 6) {
                document.getElementById("zcmm").value="";
                mm.setAttribute("placeholder", "密码不能小于六位");
                zcsr3.style["border"]="2px solid red";
            }else{
                zcsr3.style["border"]="";
            }

            let user = document.getElementById("zcuser");
            let zcuser = document.getElementById("zcuser").value;
            let zcsr1 = document.getElementById("zcsr1");
            if (zcuser.length == "") {
                user.setAttribute("placeholder", "用户名不能为空");
                zcsr1.style["border"]="2px solid red";
            }else{
                zcsr1.style["border"]="";
            }

            let sex1 = document.getElementById("nan").checked;
            let sex2 = document.getElementById("nv").checked;
            if (sex1 == false && sex2 == false) {
                alert("请选择性别")
            }

        })
       
    </script>
</body>

</html>